<template>
  <div class="display-screen">
    <!-- 顶部标题区域 -->
    <div class="header-section">
      <div class="title-container">
        <h1 class="main-title">作业许可管理大屏</h1>
        <div class="time-info">
          <span class="current-time">{{ currentTime }}</span>
          <span class="date-info">{{ currentDate }}</span>
        </div>
      </div>
      <div class="header-stats">
        <div class="stat-item">
          <div class="stat-number">{{ headerStats.total }}</div>
          <div class="stat-label">今日许可证</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ headerStats.issued }}</div>
          <div class="stat-label">已签发</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ headerStats.executing }}</div>
          <div class="stat-label">执行中</div>
        </div>
        <div class="stat-item">
          <div class="stat-number">{{ headerStats.completed }}</div>
          <div class="stat-label">已完成</div>
        </div>
      </div>
    </div>
    
    <!-- 主要内容区域 - 三屏布局 -->
    <div class="main-content">
      <!-- 左侧：许可证签发情况 -->
      <div class="left-panel">
        <div class="panel-header">
          <h3>今日许可证签发情况</h3>
          <div class="panel-count">{{ issuedPermits.length }}</div>
        </div>
        <div class="permit-stats">
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-icon issued">
                <el-icon size="24"><Document /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ permitStats.issued }}</div>
                <div class="stat-label">已签发</div>
              </div>
            </div>
            <div class="stat-card">
              <div class="stat-icon executing">
                <el-icon size="24"><Operation /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ permitStats.executing }}</div>
                <div class="stat-label">执行中</div>
              </div>
            </div>
            <div class="stat-card">
              <div class="stat-icon completed">
                <el-icon size="24"><Check /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ permitStats.completed }}</div>
                <div class="stat-label">已完成</div>
              </div>
            </div>
            <div class="stat-card">
              <div class="stat-icon pending">
                <el-icon size="24"><Clock /></el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number">{{ permitStats.pending }}</div>
                <div class="stat-label">待审批</div>
              </div>
            </div>
          </div>
        </div>
        <div class="permit-list">
          <div 
            v-for="permit in issuedPermits" 
            :key="permit.id"
            class="permit-item"
            :class="getPermitStatusClass(permit.status)"
          >
            <div class="permit-number">{{ permit.permitNumber }}</div>
            <div class="permit-info">
              <div class="permit-type">{{ getWorkTypeLabel(permit.workType) }}</div>
              <div class="permit-location">{{ permit.location }}</div>
            </div>
            <div class="permit-status">
              <div class="status-dot" :class="permit.status"></div>
              <span>{{ getStatusLabel(permit.status) }}</span>
            </div>
            <div class="permit-time">{{ permit.startTime }}</div>
          </div>
        </div>
      </div>
      
      <!-- 中央：现场监控区域 -->
      <div class="center-panel">
        <div class="monitor-container">
          <div class="monitor-header">
            <h3>现场监控</h3>
            <div class="monitor-controls">
              <el-button size="small" type="primary" @click="toggleMonitor">
                <el-icon><VideoPlay v-if="!monitorPlaying" /><VideoPause v-else /></el-icon>
                {{ monitorPlaying ? '暂停' : '播放' }}
              </el-button>
            </div>
          </div>
          <div class="monitor-content">
            <div class="monitor-grid">
              <div 
                v-for="monitor in monitors" 
                :key="monitor.id"
                class="monitor-item"
                :class="{ active: monitor.active }"
              >
                <div class="monitor-header">
                  <span class="monitor-name">{{ monitor.name }}</span>
                  <span class="monitor-status" :class="monitor.status">
                    {{ monitor.status === 'online' ? '在线' : '离线' }}
                  </span>
                </div>
                <div class="monitor-video">
                  <div class="video-placeholder">
                    <el-icon size="40" color="#409eff"><VideoCamera /></el-icon>
                    <p>{{ monitor.name }}</p>
                    <div class="video-info">
                      <span>分辨率: {{ monitor.resolution }}</span>
                      <span>码率: {{ monitor.bitrate }}</span>
                    </div>
                  </div>
                </div>
                <div class="monitor-details">
                  <div class="detail-item">
                    <span class="label">位置:</span>
                    <span class="value">{{ monitor.location }}</span>
                  </div>
                  <div class="detail-item">
                    <span class="label">负责人:</span>
                    <span class="value">{{ monitor.operator }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 右侧：公示条款 -->
      <div class="right-panel">
        <div class="panel-header">
          <h3>公示条款</h3>
          <div class="panel-count">{{ notices.length }}</div>
        </div>
        <div class="notice-content">
          <div class="notice-list">
            <div 
              v-for="notice in notices" 
              :key="notice.id"
              class="notice-item"
              :class="notice.type"
            >
              <div class="notice-header">
                <div class="notice-title">{{ notice.title }}</div>
                <div class="notice-time">{{ notice.time }}</div>
              </div>
              <div class="notice-content-text">{{ notice.content }}</div>
              <div class="notice-footer">
                <span class="notice-author">发布人: {{ notice.author }}</span>
                <span class="notice-type-tag" :class="notice.type">
                  {{ getNoticeTypeLabel(notice.type) }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 底部跑马灯 -->
    <div class="bottom-section">
      <div class="marquee-container">
        <div class="marquee-content" :style="{ animationDuration: marqueeDuration + 's' }">
          <span 
            v-for="(notice, index) in marqueeNotices" 
            :key="index"
            class="marquee-item"
          >
            {{ notice }}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, onUnmounted } from 'vue'

interface Permit {
  id: number
  permitNumber: string
  workType: string
  location: string
  status: string
  startTime: string
  endTime: string
  riskLevel: string
}

interface Monitor {
  id: number
  name: string
  location: string
  operator: string
  status: 'online' | 'offline'
  active: boolean
  resolution: string
  bitrate: string
}

interface Notice {
  id: number
  title: string
  content: string
  author: string
  time: string
  type: 'urgent' | 'normal' | 'warning'
}

const currentTime = ref('')
const currentDate = ref('')
const marqueeDuration = ref(30)
const monitorPlaying = ref(true)

const headerStats = reactive({
  total: 0,
  issued: 0,
  executing: 0,
  completed: 0
})

const permitStats = reactive({
  issued: 0,
  executing: 0,
  completed: 0,
  pending: 0
})

const issuedPermits = ref<Permit[]>([])
const monitors = ref<Monitor[]>([])
const notices = ref<Notice[]>([])

const marqueeNotices = ref([
  '安全第一，预防为主，综合治理',
  '严格执行作业许可制度，确保作业安全',
  '所有作业人员必须佩戴安全防护用品',
  '高空作业必须系好安全带，设置安全网',
  '动火作业前必须进行气体检测',
  '电气作业必须停电、验电、挂牌上锁',
  '受限空间作业必须进行通风和气体检测',
  '起重作业必须检查设备状态，设置警戒区'
])

let timeInterval: NodeJS.Timeout | null = null

// 更新当前时间
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString('zh-CN', { 
    hour12: false,
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
  currentDate.value = now.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
}

// 获取统计数据
const fetchDisplayData = async () => {
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    
    // 更新头部统计
    headerStats.total = 28
    headerStats.issued = 20
    headerStats.executing = 12
    headerStats.completed = 8
    
    // 更新许可证统计
    permitStats.issued = 20
    permitStats.executing = 12
    permitStats.completed = 8
    permitStats.pending = 6
    
    // 已签发许可证数据
    issuedPermits.value = [
      {
        id: 1,
        permitNumber: 'WP20250115001',
        workType: 'high_altitude',
        location: 'A区3楼外墙维修',
        status: 'executing',
        startTime: '08:00',
        endTime: '17:00',
        riskLevel: 'high'
      },
      {
        id: 2,
        permitNumber: 'WP20250115002',
        workType: 'hot_work',
        location: 'B区管道焊接',
        status: 'executing',
        startTime: '09:00',
        endTime: '15:00',
        riskLevel: 'high'
      },
      {
        id: 3,
        permitNumber: 'WP20250115003',
        workType: 'electrical',
        location: '配电室设备检修',
        status: 'completed',
        startTime: '08:30',
        endTime: '16:30',
        riskLevel: 'medium'
      },
      {
        id: 4,
        permitNumber: 'WP20250115004',
        workType: 'confined_space',
        location: '储罐内部清洗',
        status: 'executing',
        startTime: '10:00',
        endTime: '18:00',
        riskLevel: 'high'
      },
      {
        id: 5,
        permitNumber: 'WP20250115005',
        workType: 'lifting',
        location: 'C区设备吊装',
        status: 'completed',
        startTime: '08:00',
        endTime: '12:00',
        riskLevel: 'medium'
      }
    ]
    
    // 监控数据
    monitors.value = [
      {
        id: 1,
        name: 'A区监控点1',
        location: 'A区3楼外墙维修现场',
        operator: '张三',
        status: 'online',
        active: true,
        resolution: '1920x1080',
        bitrate: '4Mbps'
      },
      {
        id: 2,
        name: 'B区监控点2',
        location: 'B区管道焊接现场',
        operator: '李四',
        status: 'online',
        active: true,
        resolution: '1920x1080',
        bitrate: '4Mbps'
      },
      {
        id: 3,
        name: 'C区监控点3',
        location: 'C区设备吊装现场',
        operator: '王五',
        status: 'offline',
        active: false,
        resolution: '1920x1080',
        bitrate: '4Mbps'
      },
      {
        id: 4,
        name: 'D区监控点4',
        location: 'D区储罐清洗现场',
        operator: '赵六',
        status: 'online',
        active: true,
        resolution: '1920x1080',
        bitrate: '4Mbps'
      }
    ]
    
    // 公示条款数据
    notices.value = [
      {
        id: 1,
        title: '安全作业重要通知',
        content: '所有高空作业人员必须佩戴安全带，设置安全网，确保作业安全。',
        author: '安全部',
        time: '2025-01-15 09:00',
        type: 'urgent'
      },
      {
        id: 2,
        title: '动火作业安全提醒',
        content: '动火作业前必须进行气体检测，确保可燃气体浓度在安全范围内。',
        author: '安全部',
        time: '2025-01-15 08:30',
        type: 'warning'
      },
      {
        id: 3,
        title: '电气作业安全规范',
        content: '电气作业必须停电、验电、挂牌上锁，严格按照操作规程执行。',
        author: '电气部',
        time: '2025-01-15 08:00',
        type: 'normal'
      },
      {
        id: 4,
        title: '受限空间作业要求',
        content: '受限空间作业必须进行通风和气体检测，配备监护人员。',
        author: '安全部',
        time: '2025-01-14 17:00',
        type: 'normal'
      },
      {
        id: 5,
        title: '起重作业安全须知',
        content: '起重作业必须检查设备状态，设置警戒区，严禁超载作业。',
        author: '设备部',
        time: '2025-01-14 16:30',
        type: 'normal'
      }
    ]
  } catch (error) {
    console.error('获取大屏数据失败:', error)
  }
}

// 获取作业类型标签
const getWorkTypeLabel = (type: string) => {
  const labelMap: Record<string, string> = {
    high_altitude: '高空作业',
    hot_work: '动火作业',
    electrical: '电气作业',
    confined_space: '受限空间',
    lifting: '起重作业'
  }
  return labelMap[type] || type
}

// 获取状态标签
const getStatusLabel = (status: string) => {
  const labelMap: Record<string, string> = {
    executing: '执行中',
    completed: '已完成',
    overdue: '已超期',
    pending: '待审批'
  }
  return labelMap[status] || status
}

// 获取许可证状态样式类
const getPermitStatusClass = (status: string) => {
  return `status-${status}`
}

// 获取公示条款类型标签
const getNoticeTypeLabel = (type: string) => {
  const labelMap: Record<string, string> = {
    urgent: '紧急',
    warning: '警告',
    normal: '普通'
  }
  return labelMap[type] || type
}

// 切换监控播放状态
const toggleMonitor = () => {
  monitorPlaying.value = !monitorPlaying.value
}

// 自动刷新数据
const startAutoRefresh = () => {
  setInterval(() => {
    fetchDisplayData()
  }, 30000) // 每30秒刷新一次
}

onMounted(() => {
  updateTime()
  timeInterval = setInterval(updateTime, 1000)
  fetchDisplayData()
  startAutoRefresh()
})

onUnmounted(() => {
  if (timeInterval) {
    clearInterval(timeInterval)
  }
})
</script>

<style lang="scss" scoped>
.display-screen {
  height: 100vh;
  background: linear-gradient(135deg, #0c1426 0%, #1a2332 100%);
  color: #fff;
  overflow: hidden;
  font-family: 'Microsoft YaHei', sans-serif;
  
  .header-section {
    height: 120px;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    border-bottom: 2px solid #409eff;
    
    .title-container {
      .main-title {
        font-size: 36px;
        font-weight: bold;
        margin: 0 0 10px 0;
        background: linear-gradient(45deg, #409eff, #67c23a);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      
      .time-info {
        display: flex;
        gap: 20px;
        
        .current-time {
          font-size: 24px;
          font-weight: bold;
          color: #409eff;
        }
        
        .date-info {
          font-size: 16px;
          color: #ccc;
        }
      }
    }
    
    .header-stats {
      display: flex;
      gap: 40px;
      
      .stat-item {
        text-align: center;
        
        .stat-number {
          font-size: 32px;
          font-weight: bold;
          color: #67c23a;
          line-height: 1;
        }
        
        .stat-label {
          font-size: 14px;
          color: #ccc;
          margin-top: 8px;
        }
      }
    }
  }
  
  .main-content {
    height: calc(100vh - 200px);
    display: flex;
    gap: 20px;
    padding: 20px;
    
    .left-panel,
    .right-panel {
      width: 380px;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      border: 1px solid #409eff;
      
      .panel-header {
        height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        border-bottom: 1px solid #409eff;
        
        h3 {
          margin: 0;
          font-size: 18px;
          color: #409eff;
        }
        
        .panel-count {
          background: #409eff;
          color: #fff;
          padding: 4px 12px;
          border-radius: 12px;
          font-size: 14px;
          font-weight: bold;
        }
      }
    }
    
    .center-panel {
      flex: 1;
      background: rgba(0, 0, 0, 0.2);
      border-radius: 8px;
      border: 1px solid #409eff;
      
      .monitor-container {
        height: 100%;
        
        .monitor-header {
          height: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 20px;
          border-bottom: 1px solid #409eff;
          
          h3 {
            margin: 0;
            font-size: 18px;
            color: #409eff;
          }
          
          .monitor-controls {
            display: flex;
            gap: 10px;
          }
        }
        
        .monitor-content {
          height: calc(100% - 60px);
          padding: 20px;
          
          .monitor-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            height: 100%;
            
            .monitor-item {
              background: rgba(255, 255, 255, 0.05);
              border-radius: 8px;
              border: 1px solid #409eff;
              overflow: hidden;
              transition: all 0.3s;
              
              &:hover {
                background: rgba(255, 255, 255, 0.1);
                transform: translateY(-2px);
              }
              
              &.active {
                border-color: #67c23a;
                box-shadow: 0 0 20px rgba(103, 194, 58, 0.3);
              }
              
              .monitor-header {
                height: 40px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 15px;
                background: rgba(0, 0, 0, 0.3);
                border-bottom: 1px solid #409eff;
                
                .monitor-name {
                  font-size: 14px;
                  font-weight: bold;
                  color: #409eff;
                }
                
                .monitor-status {
                  font-size: 12px;
                  padding: 2px 8px;
                  border-radius: 4px;
                  
                  &.online {
                    background: #67c23a;
                    color: #fff;
                  }
                  
                  &.offline {
                    background: #f56c6c;
                    color: #fff;
                  }
                }
              }
              
              .monitor-video {
                height: 120px;
                position: relative;
                
                .video-placeholder {
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  color: #999;
                  
                  p {
                    margin: 8px 0;
                    font-size: 14px;
                  }
                  
                  .video-info {
                    display: flex;
                    gap: 10px;
                    font-size: 12px;
                    color: #ccc;
                  }
                }
              }
              
              .monitor-details {
                padding: 10px 15px;
                background: rgba(0, 0, 0, 0.2);
                
                .detail-item {
                  display: flex;
                  justify-content: space-between;
                  margin-bottom: 5px;
                  
                  &:last-child {
                    margin-bottom: 0;
                  }
                  
                  .label {
                    font-size: 12px;
                    color: #ccc;
                  }
                  
                  .value {
                    font-size: 12px;
                    color: #fff;
                  }
                }
              }
            }
          }
        }
      }
    }
    
    .permit-stats {
      padding: 20px;
      border-bottom: 1px solid #409eff;
      
      .stats-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        
        .stat-card {
          background: rgba(255, 255, 255, 0.05);
          border-radius: 8px;
          padding: 15px;
          display: flex;
          align-items: center;
          gap: 12px;
          border: 1px solid rgba(64, 158, 255, 0.3);
          transition: all 0.3s;
          
          &:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
          }
          
          .stat-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            
            &.issued {
              background: rgba(64, 158, 255, 0.2);
              color: #409eff;
            }
            
            &.executing {
              background: rgba(103, 194, 58, 0.2);
              color: #67c23a;
            }
            
            &.completed {
              background: rgba(230, 162, 60, 0.2);
              color: #e6a23c;
            }
            
            &.pending {
              background: rgba(245, 108, 108, 0.2);
              color: #f56c6c;
            }
          }
          
          .stat-info {
            .stat-number {
              font-size: 20px;
              font-weight: bold;
              color: #fff;
              line-height: 1;
            }
            
            .stat-label {
              font-size: 12px;
              color: #ccc;
              margin-top: 4px;
            }
          }
        }
      }
    }
    
    .permit-list,
    .notice-list {
      height: calc(100% - 180px);
      overflow-y: auto;
      padding: 10px;
      
      .permit-item {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 8px;
        border-left: 4px solid #409eff;
        transition: all 0.3s;
        
        &:hover {
          background: rgba(255, 255, 255, 0.1);
          transform: translateX(5px);
        }
        
        &.status-executing {
          border-left-color: #409eff;
        }
        
        &.status-completed {
          border-left-color: #67c23a;
        }
        
        &.status-overdue {
          border-left-color: #f56c6c;
        }
        
        .permit-number {
          font-size: 14px;
          font-weight: bold;
          color: #409eff;
          margin-bottom: 4px;
        }
        
        .permit-info {
          margin-bottom: 8px;
          
          .permit-type {
            font-size: 12px;
            color: #67c23a;
            margin-bottom: 2px;
          }
          
          .permit-location {
            font-size: 12px;
            color: #ccc;
          }
        }
        
        .permit-status {
          display: flex;
          align-items: center;
          gap: 6px;
          font-size: 12px;
          
          .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            
            &.executing {
              background: #409eff;
              animation: pulse 2s infinite;
            }
            
            &.completed {
              background: #67c23a;
            }
            
            &.overdue {
              background: #f56c6c;
              animation: pulse 1s infinite;
            }
          }
        }
        
        .permit-time {
          font-size: 12px;
          color: #999;
          margin-top: 4px;
        }
      }
      
      .notice-item {
        background: rgba(255, 255, 255, 0.05);
        border-radius: 6px;
        padding: 12px;
        margin-bottom: 8px;
        border-left: 4px solid #409eff;
        transition: all 0.3s;
        
        &:hover {
          background: rgba(255, 255, 255, 0.1);
          transform: translateX(5px);
        }
        
        &.urgent {
          border-left-color: #f56c6c;
          background: rgba(245, 108, 108, 0.1);
        }
        
        &.warning {
          border-left-color: #e6a23c;
          background: rgba(230, 162, 60, 0.1);
        }
        
        &.normal {
          border-left-color: #409eff;
        }
        
        .notice-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;
          
          .notice-title {
            font-size: 14px;
            font-weight: bold;
            color: #409eff;
          }
          
          .notice-time {
            font-size: 12px;
            color: #999;
          }
        }
        
        .notice-content-text {
          font-size: 12px;
          color: #ccc;
          line-height: 1.4;
          margin-bottom: 8px;
        }
        
        .notice-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;
          
          .notice-author {
            font-size: 12px;
            color: #999;
          }
          
          .notice-type-tag {
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 4px;
            color: #fff;
            
            &.urgent {
              background: #f56c6c;
            }
            
            &.warning {
              background: #e6a23c;
            }
            
            &.normal {
              background: #409eff;
            }
          }
        }
      }
    }
  }
  
  .bottom-section {
    height: 80px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 2px solid #409eff;
    display: flex;
    align-items: center;
    padding: 0 40px;
    
    .marquee-container {
      width: 100%;
      overflow: hidden;
      
      .marquee-content {
        display: flex;
        animation: marquee linear infinite;
        white-space: nowrap;
        
        .marquee-item {
          margin-right: 100px;
          font-size: 16px;
          color: #409eff;
          font-weight: bold;
        }
      }
    }
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

// 滚动条样式
.permit-list::-webkit-scrollbar,
.notice-list::-webkit-scrollbar {
  width: 6px;
}

.permit-list::-webkit-scrollbar-track,
.notice-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

.permit-list::-webkit-scrollbar-thumb,
.notice-list::-webkit-scrollbar-thumb {
  background: #409eff;
  border-radius: 3px;
}

.permit-list::-webkit-scrollbar-thumb:hover,
.notice-list::-webkit-scrollbar-thumb:hover {
  background: #66b1ff;
}
</style>

